<template>
  <div class="main">
    <section class="sign-in-container">
      <div class="btn_group">
        <el-button v-if="rightsButtons['add']" type="success" @click="add">新增活动</el-button>
        <el-button v-if="rightsButtons['setup']" type="warning" @click="setup">设置</el-button>
        <el-dialog title="" :visible.sync="setupDialogFlag">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>设置</span>
            </div>
            <el-table :data="setData" :border="true" :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}" style="width: 100%">
              <el-table-column prop="project" label="项目">
              </el-table-column>
              <el-table-column prop="rule" label="规则">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="setupDeit(scope.row)" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-dialog>
        <el-dialog title="" :visible.sync="setupDeitDialogFlag">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>编辑</span>
            </div>
            <div class="content">
              <div>总权益次数每</div>
              <el-select class="time" v-model="setupDeitForm.cycleUnit" placeholder="请选择">
                <el-option v-for="(item2,index2) in dateTypes" :key="index2" :label="item2.value" :value="item2.key">
                </el-option>
              </el-select>
              <el-input v-model="setupDeitForm.cycleTimes" placeholder=""></el-input>次
            </div>
            <div class="btn-group">
              <el-button type="primary" @click="setupDeitSave" size="small">保存</el-button>
              <el-button type="primary" @click="setupDeitCancel" size="small">取消</el-button>
            </div>
          </el-card>
        </el-dialog>
      </div>
      <div class="search">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
          <el-form-item label="活动标题:">
            <el-input v-model="searchObj.title" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="活动日期:">
            <el-date-picker v-model="searchObj.activityDate" type="date" placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="等级限制:">
            <el-select class="time" v-model="searchObj.levelLimit" placeholder="请选择" clearable>
              <el-option v-for="(item2,index2) in levels" :key="index2" :label="item2.value" :value="item2.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动状态:">
            <el-select class="time" v-model="searchObj.activityStatus" placeholder="请选择" clearable>
              <el-option v-for="(item2,index2) in status" :key="index2" :label="item2.value" :value="item2.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData('search')">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" :border="true" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}" style="width: 100%">
        <el-table-column prop="id" label="活动ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="活动标题" width="180">
        </el-table-column>
        <el-table-column prop="limitMemberCardType" label="等级限制">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.limitMemberCardType.split(',')">
              <span>{{levels.find(x=>x.key==item).value}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="activityStatus" label="活动状态">
        </el-table-column>
        <el-table-column prop="statusDescription" label="是否开启">
        </el-table-column>
        <el-table-column prop="startTime" label="活动时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="btn-group">
              <el-button v-if="rightsButtons['edit']&&(scope.row.activityStatusCode=='unStart'||scope.row.activityStatusCode=='going')" type="primary" size="mini" @click="edit(scope.row.discountId)">编辑
              </el-button>
              <el-button v-if="rightsButtons['see']" type="primary" size="mini" @click="see(scope.row.discountId)">查看
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </section>
  </div>
</template>

<script>
  import {
    freeCollection
  } from '@/api/activity/freeCollection'
  import {
    formatDate
  } from '@/utils/tools'
  export default {
    data() {
      return {
        pageType: 30, //页面类型 30:免费领 31:低价购
        dateTypes: [{
          key: 'DAY',
          value: '日',
        }, {
          key: 'WEEK',
          value: '周',
        }, {
          key: 'MONTH',
          value: '月',
        }, {
          key: 'YEAR',
          value: '年',
        }],
        setupDialogFlag: false, //设置模态框状态
        setupDeitDialogFlag: false, //设置编辑模态框状态
        setupDeitForm: {},
        pageSize: 10,
        currentPage: 1,
        lazyCurrent: 1,
        totalCount: 0,
        visible: false,
        searchObj: {},
        levels: [{
          key: 0,
          value: '普通会员'
        }, {
          key: 1,
          value: 'vip会员'
        }, {
          key: 2,
          value: '钻石会员'
        }, {
          key: 3,
          value: '董事会员'
        }],
        status: [{
          key: 'unStart',
          value: '未开始'
        }, {
          key: 'going',
          value: '活动中'
        }, {
          key: 'expire',
          value: '已失效'
        }, {
          key: 'end',
          value: '已结束'
        }],
        tableData: [],
        setData: []
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      setupDeit(row) {
        this.setupDeitDialogFlag = true;
        this.setupDeitForm = row
        console.log(this.setupDeitForm)
      },
      setupDeitSave(row) {
        freeCollection.freeCheapSetDeit({
          cycleTimes: this.setupDeitForm.cycleTimes,
          cycleUnit: this.setupDeitForm.cycleUnit,
          id: this.setupDeitForm.id
        }).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.setupDeitDialogFlag = false;
            this.setupDialogFlag = false;
            this.$message.success('操作成功！')
          } else {
            this.$message.success('操作失败！')
          }
        })
      },
      setupDeitCancel() {
        this.setupDeitDialogFlag = false;
        this.setupDialogFlag = false;
      },
      setup() {
        this.setupDialogFlag = true;
        freeCollection.freeCheapSetList({
          discountType: 'FREE'
        }).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.setData = res.data || {}
          }
        })
      },
      format(time) {
        return time.format('yyyy-MM-dd hh:mm:ss')
      },
      add() {
        this.$router.push({
          name: 'freeCollectionAdd',
          query: {
            type: 'add'
          }
        })
      },
      see(discountId) {
        this.$router.push({
          name: 'freeCollectionAdd',
          query: {
            discountId: discountId,
            type: 'see'
          }
        })
      },
      edit(discountId) {
        this.$router.push({
          name: 'freeCollectionAdd',
          query: {
            discountId: discountId,
            type: 'edit'
          }
        })
      },
      getData(type) {
        freeCollection.freeCheapList({
          activityDate: this.searchObj.activityDate,
          activityStatus: this.searchObj.activityStatus,
          levelLimit: this.searchObj.levelLimit,
          pageNo: type=='search'?this.lazyCurrent:this.currentPage,
          pageSize: this.pageSize,
          title: this.searchObj.title,
          type: this.pageType
        }).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.tableData = res.data || {}
            this.totalCount = res.totalCount
            //处理分页时条件查询无数据
            for(let i=0; i<Math.ceil(this.totalCount/this.pageSize); i++) {
              if (this.totalCount<this.currentPage*this.pageSize&&this.currentPage>1) {
                this.lazyCurrent = this.currentPage -1
              } else {
                this.lazyCurrent = this.currentPage
              }
            }
          }
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .box-card {
    div {
      flex: 1;
      margin: 0 10px;
    }

    .content {
      width: 350px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .btn_group {
    padding-bottom: 20px;
  }

  .search {
    display: flex;
    flex-direction: row;

    .el-input,
    .el-select {
      width: 180px;
    }
  }

  /deep/.el-select {
    .el-input {
      width: 100% !important;
    }
  }

  .btn-group {
    display: flex;
  }
</style>
